<template>
<!-- 确认发货 -->
    <div>
        <div  class="home" >
      <div class="customer">
          <span @click="$router.go(-1)">&lt;</span>
      </div>
      <div class="cont">
          <ul>
              <li><div><span>客户</span><p>{{ddDetails.cusName}}</p></div></li>
              <li><div><span>商品</span><p>{{ddDetails.prodName}}</p></div></li>
              <li><div><span>数量</span><p>{{ddDetails.prodNum}}</p></div></li>
              <li><div><span>下单人</span><p>{{ddDetails.orderUserName}}</p></div></li>
              <li><div><span>下单时间</span><p>{{ddDetails.orderTime}}</p></div></li>
          </ul>
      </div>
      <div class="foots">
          <ul>
              <li><span>收货人</span><p><input type="123"  v-model="message1"></p></li>
              <li><span>联系电话</span><p><input type="text"  v-model="message2"></p></li>
              <li><span>收获地址</span><p class="Input"><textarea id="TextArea1" cols="25" rows="2"  v-model="message3">return data is null.  please check data! </textarea></p></li>
              <li><span>物流单号</span><p><input type="text"  v-model="message4"></p></li>
          </ul>
      </div>
      <div class="base"> 
<van-button type="primary" size="large" color='#003499' @click="meke">确认发货消息</van-button>
      </div>
    </div>
    </div>
</template>

<script>
import {GetDeliver,GetOrderDet} from '@/raxios/api'
export default {
    data () {
        return {
            ddDetails:[],
             message1: "1",
             message2: "2",
             message3: "3",
             message4: "4",
            
        }
    },
    created(){
        GetOrderDet(this.$route.query.serialNo).then((res) => {
        //  if (res.errCode == 0) {
          console.log(res.data);
        //订单详情
          this.ddDetails = res.data;
    //   }
    });
    },
    methods:{
        meke(){
           GetDeliver({  serialNo: this.$route.query.serialNo,
                          receiver: this.message1,
                          linkPhone: this.message2,
                          address: this.message3,
                          logisticsCode: this.message4,
             }).then(res=>{
             if (res.errCode == 0) {
                 console.log(res);
                 this.$router.push('/home/poputer')
        }
       })
      }
    }
}
</script>
 
<style lang = "less" scoped>
    .home{
    width: 100%;
    height:100vh;
    background-color: #f5f5f5;
    .customer{
        width: 100%;
        height: 0.64rem;
        background-color: #003499;
        span{
            color: #fff;
            line-height: 0.7rem;
            margin-left: 0.1rem;
            font-size: 0.3rem;
            
        }
    }
    .cont{
        height: 2.21rem;
        background-color: #fff;
        margin-top: 0.11rem;
        li {
            width: 100%;
            border-top: 1px solid #cccc;
            div{
            display: flex;
            justify-content: space-between;
            line-height: 0.45rem;
             padding: 0 0.1rem;
            p{
                color:#999999;
            }
        }
        }
    }
    .foots{
        height: 2.65rem;
        background-color: #fff;
        margin-top: 0.5rem;
        line-height: 0.4rem;
        li{
            display: flex;
            justify-content: space-between;
            padding: 0 0.3rem;
            input{
                width: 2.3rem;
                height: 0.23rem;
                background-color: #ececec;
                border: none;
                border-radius: 0.06rem;

            }
           
        }
        .Input textarea{
            height: 0.9rem;
            line-height: 0.2rem;
            width: 2.28rem;
            margin-top: 0.1rem;
            background-color: #ececec;
            border: none;
            border-radius: 0.06rem;
        }

    }
    .base{
        height: 0.61rem;
        width: 100%;
        position:fixed;
        bottom: 0;
        background-color: #fff;
        .van-button{
            width: 90%;
            margin-left: 0.2rem;
            border-radius: 0.5rem;
            margin-top: 0.05rem;
        }
    }
    }
</style>